---
title: Next.js
description: Ultracite向けの Next.js 固有のリンティングルール。
---

The Next.js 構成には、画像最適化、ドキュメント構造、App Router のパターンに関する Next.js 固有のリンティングルールが含まれます。

## インストール

Next.js 構成をあなたの `biome.jsonc` に追加してください:

```jsonc title="biome.jsonc"
{
  "extends": ["ultracite/core", "ultracite/next"]
}
```

## 概要

この構成は Next.js 開発に特化したルールを追加します:

- **画像の最適化**: Next.js の Image コンポーネントの使用を強制する
- **ドキュメント構造**: Next.js の特殊コンポーネントの不適切な使用を防ぐ
- **クライアントコンポーネント**: 非同期のクライアントコンポーネントが正しく扱われることを保証する
- **設定ファイル**: `next.config.*` ファイルに対する特別な扱い

## Next.js 固有のルール

### ナーサリー

| ルール | 設定 | 説明 |
|------|---------|-------------|
| `noNextAsyncClientComponent` | `error` | Next.js における非同期のクライアントコンポーネントを防止します。クライアントコンポーネントは同期であるべきで、非同期の処理はサーバーコンポーネントを使用してください。 |

### パフォーマンス

| ルール | 設定 | 説明 |
|------|---------|-------------|
| `noImgElement` | `error` | `<img>` HTML 要素の使用を禁止します。自動画像最適化のため、代わりに Next.js の `<Image>` コンポーネントを使用してください。 |

### スタイル

| ルール | 設定 | 説明 |
|------|---------|-------------|
| `noHeadElement` | `error` | `<head>` HTML 要素の使用を禁止します。代わりに Next.js の `next/head` または App Router の metadata API を使用してください。 |

### 疑わしい

| ルール | 設定 | 説明 |
|------|---------|-------------|
| `noDocumentImportInPage` | `error` | ページファイルで `next/document` をインポートすることを防ぎます。`_document.tsx` は `pages/_document.tsx` にのみ存在するべきです。 |
| `noHeadImportInDocument` | `error` | `_document.tsx` で `next/head` をインポートすることを防ぎます。代わりに `next/document` からの `<Head>` を使用してください。 |

## 設定ファイルのオーバーライド

Next.js プリセットには設定ファイルや App Router コンポーネントに対する特別な扱いが含まれます:

### Next.js 構成ファイル

```jsonc
{
  "overrides": [
    {
      "includes": ["next.config.*"],
      "linter": {
        "rules": {
          "suspicious": {
            "useAwait": "off"
          }
        }
      }
    }
  ]
}
```

これは通常のリンティングルールを通過しない可能性のある Next.js の設定パターンを許容します。

### App Router のページとレイアウト

```jsonc
{
  "overrides": [
    {
      "includes": ["**/page.{ts,tsx,js,jsx}", "**/layout.{ts,tsx,js,jsx}"],
      "linter": {
        "rules": {
          "suspicious": {
            "useAwait": "off"
          }
        }
      }
    }
  ]
}
```

App Router のページおよびレイアウトコンポーネントは、`await` を要求されることなく非同期にすることが許可されます。Next.js はこれらをサーバーサイドレンダリングやデータフェッチ用に特別に処理します。